<template>
  <div>
      <!-- Vant:导航栏 -->
       <van-nav-bar title="小U商城" />
       <!-- Vant:搜索 -->
      <van-search v-model="val" placeholder="请输入搜索关键词" />
       <!-- 商品分类  Vant: 分类选择 -->
      <van-tree-select height="140vw" :items="items" :main-active-index.sync="active">
        <template #content>
            <van-divider>{{items[active]?items[active].catename:''}}</van-divider>
            <!-- 某个一级分类下面的所有二级分类：Vant:宫格 -->
            <van-grid :column-num="3">
              <van-grid-item v-for="obj in items[active]?items[active].children:[]" :key="obj.id" :icon="imgHost + obj.img" :text="obj.catename" @click="toList(obj.id)" />
            </van-grid>            
        </template>
      </van-tree-select>      
  </div>
</template>

<script>

import {getAllCate} from '../../../request/api.js'

export default {
   data(){
    return {
      val:'',//用户输入的关键词
      active: 0,
      //items: [{ text: '分组 1' }, { text: '分组 2' }],      
      items: [],      
    }
   },
   methods:{
      toList(cid){  //跳转到商品列表页面
         this.$router.push(`/goodslist?cateid=${cid}&type=2`)
      },
       //获取所有商品分类数据：
      getGoodsCate(){
        getAllCate().then(d=>{
            if(d.status == 200){
              for(let obj of d.data.list){
                  obj.text = obj.catename;
              }
              this.items = d.data.list;
             // console.log(this.items[0].children,'children');
            }
        }).catch(e=>{
          console.log(e);
        });
      }
   },
   mounted(){
      this.getGoodsCate();
   }
}
</script>

<style scoped>
.van-nav-bar{
  background-color: red;
}

.van-nav-bar /deep/ .van-nav-bar__title{
  color:white;
  font-size: 26px;
}
</style>